<template>
  <div class="Details1">
    <NavBar fixed placeholder title="报修记录" z-index="999" ref="nav">
      <template #left>
        <Icon
          name="arrow-left"
          size="0.53rem"
          color="#000"
          @click="$router.back()"
        />
      </template>
    </NavBar>
    <img class="bg-img" src="../../../assets/img/card.png" alt="" />
    <img class="bg-img2" src="../../../assets/img/deal.png" alt="" />
    <div class="header">
      <div class="state">任务状态 - {{ info.state }}</div>
      <div class="id">报修编号：{{ info.ermId }}</div>
    </div>
    <div class="main">
      <div class="card">
        <Cell title="设备名称" :value="info.equipName"></Cell>
        <Cell title="位置" :value="info.address"></Cell>
        <Cell title="报修描述" :value="info.node"></Cell>
        <Cell title="联系人" :value="info.userName"></Cell>
        <Cell title="联系电话" :value="info.phone"></Cell>

        <p v-if="info.imgList.length > 0" class="phone-text">照片</p>
        <div v-if="info.imgList.length > 0">
          <VanImage
            v-for="(item, i) in info.imgList"
            :key="i"
            :src="/nhw/ + item"
            width="150"
            height="150"
            class="images"
          >
          </VanImage>
        </div>
      </div>
    </div>
    <!-- <div class="drag" @click="toJump">
      <Icon name="todo-list-o" size="40"></Icon>
      <span>查看流程</span>
    </div> -->

    <SideBtn
      :to="{
        name: 'WorkflowSteps',
        params: {
          workflowId: 'equipRepairsManage',
          pkValue: $route.query.ermNo,
        },
      }"
    />
  </div>
</template>

<script>
import { EquipmentRepairServiceDetails } from "../../../api/work";
import SideBtn from "components/SideBtn";
import {
  Image as VanImage,
  Uploader,
  Popup,
  NavBar,
  Icon,
  Field,
  Cell,
  List,
  Button,
} from "vant";
export default {
  props: {},
  data() {
    return {
      info: {
        name: "1",
        location: "2",
        describe: "3",
        user: "4",
        phone: "5",
      },
      query: {
        workflowId: "equipRepairsManage",
        pkValue: this.$route.query.ermNo,
      },
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getList();
  },
  watch: {},
  methods: {
    async getList() {
      const { param } = await EquipmentRepairServiceDetails({
        ermNo: this.$route.query.ermNo,
      });
      // console.log(param.data[0]);
      let info = param.data[0];
      // this.info.imgList = this.info.attach.split(",");
      let arr = info.attach.split(",");
      let picList = [
        "jpeg",
        "tiff",
        "png",
        "gif",
        "psd",
        "raw",
        "eps",
        "svg",
        "pdf",
        "bmp",
      ];
      let arr1 = [];
      arr.forEach((v) => {
        let strArr = v.split(".");
        let item = strArr[strArr.length - 1];
        if (picList.indexOf(item) > -1) {
          arr1.push(v);
        }
      });

      info.imgList = arr1;
      this.info = info;
      console.log(this.info);
    },
    toJump() {
      this.$router.push({
        path: "SnapshotSteps",
        query: {
          workflowId: "equipRepairsManage",
          pkValue: this.$route.query.ermNo,
        },
      });
    },
  },
  components: {
    VanImage,
    Uploader,
    Button,
    Popup,
    NavBar,
    Icon,
    Field,
    Cell,
    List,
    SideBtn,
  },
};
</script>

<style scoped lang="less">
.Details1 {
  background-color: #f8f8f8;
  .flex {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  background-color: #f7f7f9;
  // /deep/.van-nav-bar__content {
  //   background-color: #3982f6;

  //   .van-nav-bar__title {
  //     color: #fff;
  //   }
  // }
  .bg-img {
    width: 100%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
  .bg-img2 {
    z-index: 99;
    width: 200px;
    height: 200px;
    position: absolute;
    right: 24px;
    top: 150px;
  }
  .header {
    width: 100%;
    height: 190px;
    // background-color: red;
    display: flex;
    flex-flow: column;
    justify-content: center;
    padding-left: 20px;
    color: #edf0f5;

    .state {
      font-size: 48px;
      z-index: 99;
    }
    .id {
      font-size: 26px;
      z-index: 99;
    }
  }
  .main {
    padding: 0 15px;
    .card {
      width: 100%;
      overflow: hidden;
      background-color: #fff;
      padding-bottom: 30px;
    }
  }
  .phone-text {
    font-size: 28px;
    padding: 20px;
    padding-left: 30px;
  }
  .images {
    margin-left: 25px;
  }
  .drag {
    position: fixed;
    bottom: 200px;
    right: 20px;
    padding: 10px;
    border-radius: 12px;
    background-color: #c6a86f;
    color: #fff;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    span {
      margin-left: 7px;
    }
  }
}
</style>
